import { message } from 'antd';
import React, { useContext } from 'react';
import { ReplyContext } from './context';
import styles from './index.less';

const Submit: React.FC<Reply.SubmitProps> = (props) => {
  const { minWordCount = 0, maxWordCount = 0, onSubmit, onCancel } = props;
  const { totalWordCount } = useContext(ReplyContext);

  const handleSubmitForm = () => {
    if (maxWordCount > 0 && totalWordCount > maxWordCount) {
      message.info(`请输入符合字数的回复，此题回复字数上限为${maxWordCount}`);
      return;
    }

    if (totalWordCount - minWordCount < 0) {
      message.info('请输入符合字数的回复');
      return;
    }

    onSubmit();
  };

  return (
    <div>
      {onCancel && (
        <span className={styles['btn-cancel']} onClick={onCancel}>
          放弃修改
        </span>
      )}
      <span className={styles['btn-submit']} onClick={handleSubmitForm}>
        提交
      </span>
    </div>
  );
};

export default Submit;
